import React, { useState, useRef, useEffect } from 'react'
import Filter from './Filter'
import Area from './Area'
import Industry from './Industry'
import dayjs from 'dayjs'
import { Spin } from 'antd'
import Container from '@/appComponents/Container'
import { getEmergencyCount } from '@/api'
import './index.scss'
const AlarmStatistics = () => {
  const format = 'YYYY-MM-DD'
  const [isLoading, setIsLoading] = useState(false)
  const [paramsData, setParamsData] = useState({
    warn_time: dayjs().add(-1, 'd').format(format)
  })

  const [countyData, setCountyData] = useState()
  const [industryData, setIndustryData] = useState()

  const getData = async () => {
    setIsLoading(true)
    try {
      const res = await getEmergencyCount(paramsData)
      if (res) {
        setCountyData(res.county)
        setIndustryData(res.industry)
      }
    } catch (error) {
      console.log(error)
    }
    setIsLoading(false)
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div className="AlarmStatistics">
      <Container>
        <Container.ContainerQuery title="查询条件">
          <Filter
            onQuery={getData}
            paramsData={paramsData}
            setParamsData={setParamsData}
          />
        </Container.ContainerQuery>
        <Container.ContainerContent title="查询结果">
          <Spin tip="Loading......" spinning={isLoading}>
            <div
              style={{
                display: 'flex',
                width: '100%',
                height: '100%',
                flexDirection: 'column',
                justifyContent: 'space-evenly',
                gap: '10px'
              }}
            >
              <Area countyData={countyData}></Area>
              <Industry industryData={industryData}></Industry>
              {/* </div> */}
            </div>
          </Spin>
        </Container.ContainerContent>
      </Container>
    </div>
  )
}
export default AlarmStatistics
